<template>
  <div class="w">
    <div class="goods-tabs">
      <nav>
        <a
          :class="{ active: activeName === 'detail' }"
          href="javascript:;"
          @click="activeName = 'detail'"
          >商品详情</a
        >
        <a
          :class="{ active: activeName === 'comment' }"
          href="javascript:;"
          @click="activeName = 'comment'"
          >商品评价<span>(500+)</span></a
        >
      </nav>
      <!-- 这个位置显示对应的组件 GoodsDetail 或者 GoodsComment -->
      <Goods v-if="activeName == 'detail'" :detailObjTwo="detailObjOne"></Goods>
      <GoodsComment v-if="activeName == 'comment'"></GoodsComment>
    </div>
    <!-- 热销榜 -->
    <GoodsHot></GoodsHot>
  </div>
</template>

<script>
// 引入热销榜组件
import GoodsHot from "./GoodsHot.vue";
// 商品评价组件
import GoodsComment from "@/components/Detail/GoodsComment.vue";
// 商品详情组件
import Goods from "@/components/Detail/Goods.vue";
export default {
  props: ["detailObjOne"],
  components: {
    GoodsHot,
    GoodsComment,
    Goods,
  },
  data() {
    return {
      activeName: "detail",
    };
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.w {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.goods-tabs {
  width: 940px;
  min-height: 600px;
  background: #fff;
  nav {
    height: 70px;
    line-height: 70px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    a {
      padding: 0 40px;
      font-size: 18px;
      position: relative;
      > span {
        color: red;
        font-size: 16px;
        margin-left: 10px;
      }
      &:first-child {
        border-right: 1px solid #f5f5f5;
      }
      &.active {
        &::before {
          content: "";
          position: absolute;
          left: 40px;
          bottom: -1px;
          width: 72px;
          height: 2px;
          background: #27bb9a;
        }
      }
    }
  }
}
</style>
